<template>
  <div style="padding-top: 200px;">
    <el-row>
      <el-col :span="24">
        <div class="newsBlock">
          <div class="newsBlockTitle">
            <span>{{$t('lang.home.newsTitle')}}</span>
            <a href="javascript:;" class="moreSize">{{$t('lang.home.moreButton')}}</a>
          </div>
          <div class="newsBlockList">
            <el-row :gutter="35">
              <el-col :span="12">
                <div style="margin-top: 16px;">
                  <div class="newsBlockItem" v-for="(item, index) of newsData" :key="index + 'news'">
                    <span @click="openUrl(item.url)">{{item.title}}</span>
                    <span>{{item.date}}</span> 
                     <!-- <span>{{item.name | nameShow}}</span>
                    <span>{{item.time}}</span> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <!-- <div style="position: relative;margin-top: 20px;">
                  <img src="../../assets/importExportImg/news_image_572_250.jpg" alt="">
                  <span style="padding-left:10px;line-height:40px;color:#fff;width:100%;box-sizing:border-box;position: absolute;left: 0;bottom: 3px;background-color: rgba(0,0,0,.3);height: 40px;">{{imgSize | nameShow}}</span>
                </div> -->
                  <el-carousel>
                    <el-carousel-item v-for="(item, index) of newsPicData" :key="index + 'com'">
                      <div style="position: relative;margin-top: 20px;">
                      <img :src="item.picurl" @click="openUrl(item.url)" alt="">
                      <span style="padding-left:10px;line-height:40px;color:#fff;width:100%;box-sizing:border-box;position: absolute;left: 0;bottom: 3px;background-color: rgba(0,0,0,.3);height: 40px;">{{item.title | nameShow}}</span>
                      </div>
                    </el-carousel-item>
                  </el-carousel>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <div class="newsBlock importExportTabs" style="margin-top: 15px;">
          <el-tabs v-model="activeNameBlockF" @tab-click="handleClickBlckF">
            <el-tab-pane :label="$t('lang.home.filesTitle')" name="first">
              <div style="margin-top: 16px;">
                <iframe :src="src" width="100%" height="250px" style="border:0; overflow: hidden;"></iframe>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('lang.home.gfilesTitle')" name="second">
              <div style="margin-top: 16px;">
                <div class="newsBlockItem" v-for="(item, index) of newsDataCom" :key="index + 'com'">
                  <!-- <span>{{item.name | nameShowCom}}</span>
                  <span>{{item.time}}</span> -->
                  <span @click="openUrl(item.url)">{{item.title | nameShowCom}}</span>
                    <span>{{item.date}}</span> 
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="newsBlock importExportTabs" style="margin-top: 15px;">
          <el-tabs v-model="activeNameBlockS" @tab-click="handleClickBlckS">
            <el-tab-pane :label="$t('lang.home.annTitle')" name="first">
              <div style="margin-top: 16px;">
                <div class="newsBlockItem" v-for="(item, index) of newsDataNotice" :key="index + 'com'">
                    <span @click="openUrl(item.url)">{{item.title | nameShowCom}}</span>
                    <span>{{item.date}}</span> 
                  <!-- <span>{{item.name | nameShowCom}}</span>
                  <span>{{item.time}}</span> -->
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('lang.home.gannTitle')" name="second">
              <!-- 集团公司通知公告 -->
            </el-tab-pane>
          </el-tabs>
          <a href="javascript:;" class="moreSize listMore">{{$t('lang.home.moreButton')}}</a>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="8">
        <div class="newsBlock lastNewsBlock" style="margin-top: 15px;">
          <div class="newsBlockTitle">
            <span>{{$t('lang.home.marketTitle')}}</span>
            <a href="javascript:;" class="moreSize">{{$t('lang.home.moreButton')}}</a>
          </div>
          <div class="newsBlockList">
            <el-row>
              <el-col :span="24">
                <div style="margin-top: 16px;">
                  <div class="newsBlockItem" v-for="(item, index) of newsDataLast" :key="index + 'last'">
                    <span @click="openUrl(item.url)">{{item.title | nameShowComLast}}</span>
                    <span>{{item.date}}</span> 
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="newsBlock lastNewsBlock" style="margin-top: 15px;">
          <div class="newsBlockTitle">
            <span>{{$t('lang.home.oilpriceTitle')}}</span>
          </div>
          <div class="newsBlockList" style="margin-top: 12px">
            <line-chart :chart-data="lineChartData"></line-chart>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="newsBlock lastNewsBlock" style="margin-top: 15px;">
          <div class="newsBlockTitle">
            <span>{{$t('lang.home.linkTitle')}}</span>
          </div>
          <div class="newsBlockList" style="margin-top: 15px;">
            <div class="commLink">
              <!-- <el-select v-model="valueLinkOne" placeholder="请选择" @click="openUrl('')">
                <el-option
                  v-for="item in optionsLinkOne"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  >
                </el-option>
              </el-select> -->
               <el-dropdown
                  placement="bottom"
                  trigger="click"
                  @command="openUrl"
                >
                  <el-button class="search-btn" style="width:300px;">
                    机关单位
                  <i class="el-icon-arrow-down el-icon--right" style="width:400px;"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="http://portal.cnoocltd.cnooc" style="width:300px;"
                    >有限公司</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="commLink">
              <el-dropdown
                  placement="bottom"
                  trigger="click"
                  @command="openUrl"
                >
                  <el-button class="search-btn" style="width:300px;">
                    海油内部单位
                  <i class="el-icon-arrow-down el-icon--right" style="width:350px;"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="http://www.cosl.com.cn/" style="width:300px;"
                    >油田服务</el-dropdown-item>
                    <el-dropdown-item command="http://www.zhtrust.com/" style="width:300px;"
                    >中海信托</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="commLink">
              <el-dropdown
                  placement="bottom"
                  trigger="click"
                  @command="openUrl"
                >
                  <el-button class="search-btn" style="width:300px;">
                    常用链接
                  <i class="el-icon-arrow-down el-icon--right" style="width:400px;"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="http://10.68.100.63/jchk_web/linkey.nsf" style="width:300px;"
                    >文档一体化</el-dropdown-item>
                    <el-dropdown-item command="http://web01.oa.cnooc/indishare/sitemaster.nsf/(page)/indexzgsjg?open" style="width:300px;"
                    >总公司OA主页</el-dropdown-item>
                    <el-dropdown-item command="http://ht01.oa.cnooc" style="width:300px;"
                    >合同系统主页</el-dropdown-item>
                    <el-dropdown-item command="http://10.63.7.7:6001/demo/reportJsp/showReport.jsp?raq=credit.raq" style="width:300px;"
                    >信用额度监控表（时间排序）</el-dropdown-item>
                    <el-dropdown-item command="http://10.63.7.7:6001/demo/reportJsp/showReport.jsp?raq=xyed.raq" style="width:300px;"
                    >信用额度监控表</el-dropdown-item>
                    <el-dropdown-item command="http://ehr.cnooc" style="width:300px;"
                    >e-hr系统</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import LineChart from './components/LineChart'
import { getNewsData,getFilesData } from "@/api/interface"
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  name: 'homePage',
  data() {
    return {
      src: 'http://10.68.100.63/jchk_web/gwxt_web_fwchl_arc.nsf/fm_PFFileOfOA?readform',
      lineChartData: lineChartData.newVisitis,
      //imgSize: '进出口公司党委理论学习中心进出口公司党委理论学习中心进出口公司党委理论学习中心进出口公司党委',
      activeNameBlockF: 'first',
      activeNameBlockS: 'first',
      newsData: [],
      newsPicData: [],
      newsDataNotice: [],
      newsDataLast: [],
      newsDataCom: []
    }
  },
  components: {
    LineChart
  },
  created(){
    this.getOAInfo()
  },
  filters: {
    nameShow(val) {
      //console.log(val.length)
      if (val.length > 30) {
        return val.slice(0, 30) + '...'
      } else {
        return val
      }
    },
    nameShowCom(val) {
      //console.log(val.length)
      if (val.length > 30) {
        return val.slice(0, 30) + '...'
      } else {
        return val
      }
    },
    nameShowComLast(val) {
      //console.log(val.length)
      if (val.length > 15) {
        return val.slice(0, 15) + '...'
      } else {
        return val
      }
    }
  },
  methods: {
    getOAInfo(){
        //公司新闻
        getNewsData('GSXW').then(response => {
          this.newsData = response.data
        });
        //通知公告
        getNewsData('TZGG').then(response => {
          this.newsDataNotice = response.data
        });
        //市场要闻
        getNewsData('SCYW').then(response => {
          this.newsDataLast = response.data
        });
        //图片新闻
        getFilesData('TPXW').then(response => {
          this.newsPicData = response.data
        });
        //集团公司文件
        getFilesData('JTGSWJ').then(response => {
          this.newsDataCom = response.data
        });
    },
    openUrl(url){
      window.open(url)
    },
    handleClickBlckF(tab, event) { // 公司文件
      //console.log(tab, event)
    },
    handleClickBlckS(tab, event) { // 通知公告
      //console.log(tab, event)
    }
  }
}
</script>
<style>
.newsBlock{
  width: 100%;
  height: 350px;
  padding: 20px 18px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #ffffff;
}
.lastNewsBlock{

}
  .newsBlockItem{
    display: flex;
    justify-content: space-between;
  }
  .newsBlockTitle{
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding-bottom: 19px;
    border-bottom: 1px solid #ebebeb;
  }
  .newsBlockTitle span{
    font-size: 16px;
    font-weight: 700;
    color: #666;
  }
  .newsBlockItem{
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all .3s;
  }
  .moreSize{
    display: inline-block;
    border: 1px solid #2a70c4;
    color: #2a70c4;
    padding: 5px 10px;
    text-align: center;
    font-size: 12px;
    transition: all .3s;
  }
  .moreSize:hover{
    color: #ffffff;
    background-color: #2a70c4;
  }
  .newsBlockItem:hover{
    color: #2a70c4;
  }
  .importExportTabs{
    position: relative;
  }
  .importExportTabs .listMore{
    position: absolute;
    top: 22px;
    right: 18px;
  }

</style>
